<template>
  <div>
    <el-form :inline="true"
             class="demo-form-inline pt10 text_nowrap"
             label-width="85px"
             label-position="right">
              <div class="w100">
                <el-form-item label="系统名称：">
                  <el-select :disabled="group !== 'tenancy'" size="small" v-model="searchData.system_id" placeholder="请选择" style="width:150px" clearable>
                    <el-option
                      v-for="item in systemsLiteList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="机构名称：">
                  <el-select :disabled="institutionsLiteList.length === 0" size="small" v-model="searchData.institution_id" placeholder="请选择" style="width:150px" @change="$forceUpdate()" clearable>
                    <el-option
                      v-for="item in institutionsLiteList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="设备地址：">
                  <el-input
                    @keyup.enter.native="searchCondation"
                    size="small"
                    placeholder="请输入设备地址"
                    style="width:150px;"
                    v-model="searchData.modality_host"
                    clearable>
                  </el-input>
                </el-form-item>
                <el-form-item label="设备类型：" label-width="100px">
                  <el-select size="small" v-model="searchData.modality_type" placeholder="请选择" style="width:90px" clearable>
                    <el-option
                      v-for="(item, index) in modalityTypeOptions"
                      :value="item.dic_define_value"
                      :label="item.dic_define_value"
                      :key="index">
                    </el-option>
                    <el-option
                      value="Viewer"
                      label="Viewer">
                    </el-option>
                    <el-option
                      value="Other"
                      label="Other">
                    </el-option>
                  </el-select>
                </el-form-item>
<!--                <el-form-item label="设备状态：">-->
<!--                  <el-input-->
<!--                    size="small"-->
<!--                    placeholder="请输入设备状态"-->
<!--                    style="width:150px;"-->
<!--                    clearable>-->
<!--                  </el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="前置机：" label-width="87px">
                  <el-select size="small" v-model="searchData.front_node_id" placeholder="请选择" style="width:150px" clearable>
                    <el-option
                      v-for="item in frontnodesInfo"
                      :key="item.id"
                      :label="item.front_node_name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="ml20">
                  <el-button type="primary" class="mr10" size="medium" @click="searchCondation">查询</el-button>
                  <el-button type="primary" class="mr20 ml0" plain size="medium" @click="resetCondation">重置</el-button>
                </el-form-item>
              </div>
    </el-form>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      searchData: {
        institution_id: '',
        modality_type: '',
        front_node_id: '',
        // tenantName: '',
        system_id: '',
        modality_host: ''
      },
      modalityTypeOptions: [], // 设备类型
      resetSearchData: {},
      institutionsLiteList: [], // 机构名称
      productCode: ''
    }
  },
  props: ['frontnodesInfo', 'systemsLiteList'],
  computed: {
    ...mapGetters(['group', 'systemid'])
  },
  watch: {
    'searchData.system_id':  {
      handler: function (newVal) {
        if(newVal) {
          this.institutionsLiteList = []
          this.searchData.institution_id = ''
          this.getInstitutionsLiteList(newVal)
          this.getSystemDetail(newVal)
        }
      },
      immediate: true
    }
  },
  mounted () {
    this.resetSearchData = Object.assign(this.resetSearchData, this.searchData)
    // 这里要改成 this.group
    if(this.group === 'dept') { // 科室角色
       this.searchData.system_id = this.systemid
    }


  },
  methods: {
    searchCondation () { // 搜索
      this.$emit('search', Object.assign({}, this.searchData))
    },
    resetCondation () { // 重置
      // institutionId: '',
      //   modalityType: '',
      //   front_node_id: '',
      //   // tenantName: '',
      //   systemId: '',
      //   modality_host: ''
      if(this.group === 'tenancy') {
        this.searchData.institution_id = ''
        this.searchData.system_id = ''
        this.institutionsLiteList = []
      }else if(this.group === 'dept') {
        this.searchData.institution_id = ''
      }
      this.searchData.modality_type = ''
      this.searchData.front_node_id = ''
      this.searchData.modality_host = ''
      // this.searchData = Object.assign(this.searchData, this.resetSearchData)
    },
    systemNameChange(val) {
      this.getInstitutionsLiteList(val)
      this.institutionsLiteList = []
      this.searchData.institution_id = ''
    },
    async getInstitutionsLiteList(val) {
      if(val) {
        // 转换成系统ID
        // let systemId = ''
        // this.systemsLiteList.forEach((ele) => {
        //   if(ele.name === val) {
        //     systemId = ele.id
        //   }
        // })
        let res = await this.$pacsApi.pacsApi.getInstitutionsLiteList({ system_id: val })
        let { code, data } = res
        if(code === 0) {
          this.institutionsLiteList = data
        }
      }
    },
    // 获取系统详情
    async getSystemDetail(systemid) {
      let res = await this.$pacsApi.pacsApi.getSystemDetail({ id: systemid })
      let { code, data } = res
      if(code === 0) {
        this.productCode = data.product_code
        // 请求设备类型
        this.getDicDefine(this.productCode)
      }
    },
    // 获取设备类型
    async getDicDefine(productName) {
      let res = await this.$pacsApi.pacsApi.getDicDefine({ dicTypeCode: 'ServiceSectId', DicDefineAttribute: productName, SystemId: this.searchData.system_id })
      let { code, data } = res
      if(code === 0) {
        this.modalityTypeOptions = data
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .el-form-item {
    margin-bottom: 5px;
  }
  .el-form--inline .el-form-item {
    margin-right: 0;
  }
</style>
